<template>
  <v-carousel
    class="dashboard-carousel"
    cycle
    width="100%"
    height="100%"
    :show-arrows="false"
    show-indicators
    hide-delimiters
    >
    <v-carousel-item>
      <DataTable
        :headers="headers"
        :items="items">
      </DataTable>
    </v-carousel-item>
    <v-carousel-item>
      <DataTable
        :headers="headers"
        :items="items">
      </DataTable>
    </v-carousel-item>
    <v-carousel-item>
      <SparkLine
        :headers="headers"
        :items="items">
      </SparkLine>
    </v-carousel-item>
    </v-carousel>
</template>
<script lang="ts" setup>
// This is a simple card component for the dashboard.
// It can be reused in different parts of the dashboard.
const headers = ref([
    {
        title: '代码',
        key: 'code',
        align: 'center',
    },
    {
        title: '名称',
        key: 'name',
        align: 'center' 
    },
    {
        title: '价格',
        key: 'price',
        align: 'center' 
    },
    {
        title: '昨收',
        key: 'lastClose',
        align: 'center' 
    },
    {
        title: '今开',
        key: 'open',
        align: 'center' 
    },
    {
        title: '涨跌',
        key: 'change',
        align: 'center' 
    },
    {
        title: '涨跌幅',
        key: 'changePercent',
        align: 'center' 
    },
    {
        title: '最高',
        key: 'high',
        align: 'center' 
    },
    {
        title: '最低',
        key: 'low',
        align: 'center' 
    }
]);
const items = [
  {
    code: 1,
    name: 'a',
    price: 10.0,
    change: 0,
    changePercent: 0,
    lastClose: 0,
    open: 0,
    high: 0,
    low: 0,
  },
  {
    code: 2,
    name: 'b',
    price: 0,
    change: 10,
    changePercent: 10.0,
    lastClose: 0,
    open: 0,
    high: 0,
    low: 0,
  },
  {
    code: 2,
    name: 'b',
    price: 0,
    change: -1.10,
    changePercent: -1.111,
    lastClose: 0,
    open: 0,
    high: 0,
    low: 0,
  },
  {
    code: 2,
    name: 'b',
    price: 0,
    change: 0,
    changePercent: 0,
    lastClose: 0,
    open: 0,
    high: 0,
    low: 0,
  },
  {
    code: 3,
    name: 'c',
    price: 0,
    change: 0,
    changePercent: 0,
    lastClose: 0,
    open: 0,
    high: 0,
    low: 0,
  },
  {
    code: 2,
    name: 'b',
    price: 0,
    change: 0,
    changePercent: 0,
    lastClose: 0,
    open: 0,
    high: 0,
    low: 0,
  },
];
</script>